<template>
	<view class="content">
		<view class="topContent">
			<video :src="topVideoUrl" autoplay controls  v-if="topVideoUrl&&showVideo"></video>
			<image class="topImg" :src="topImgUrl"  v-if="topImgUrl" mode="aspectFill"  @click="previewImg(topImgUrl)"></image>
		</view>
<view class="aboutMe" >
			<view class="ql-editor">
				<u-parse :content="article" @preview="preview" @navigate="navigate" />
				<view class="phone" v-if="companyDetail.contact_number">
					<image class="icons" mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/phone.png"  ></image>
				
					<text>联系电话</text><text v-if="companyDetail.contact_number!=null">{{companyDetail.contact_number}}</text>
					<text class="btn" @click="calling(companyDetail.contact_number)">一键拨号</text>
				</view>
				<view class="phone" v-if="companyDetail.contact_phone">
					<image class="icons" mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/phone.png" ></image>
					<text>服务电话</text><text v-if="companyDetail.contact_phone!=null">{{companyDetail.contact_phone}}</text>
					<text class="btn" @click="calling(companyDetail.contact_phone)">一键拨号</text>
				</view>
				<!-- <view class="phone">
					<image class="icons" mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/weixin.png" ></image>
					<text>公众号</text><text @click="showModal(companyDetail.wechat_img_url)">关注我们</text>
				</view> -->
				<view class="phone" v-if="companyDetail.wxapp_img_url">
					<image class="icons" mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/min.png" ></image>
					<text>小程序码</text>
					<image @click="showModal(companyDetail.wxapp_img_url)" class="code" v-if="companyDetail.wxapp_img_url" :src="companyDetail.wxapp_img_url"></image>
				</view>
				<!-- <view class="phone" v-if="companyDetail.website">
					<image class="icons" mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/net.png" ></image>
					<text>网站</text><text v-if="companyDetail.website!=null">{{companyDetail.website}}</text>
				</view> -->
				<view class="phone" @click="skipMap" v-if="companyDetail.province||companyDetail.city||companyDetail.address_detail||companyDetail.area">
					<image class="icons" mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/adds.png" ></image>
					<text>地址</text>
					<text class="cont">
						{{companyDetail.province==null?'':companyDetail.province}}{{companyDetail.city==null?'':companyDetail.city}}{{companyDetail.area==null?'':companyDetail.area}}{{companyDetail.address_detail==null?'':companyDetail.address_detail}}
					</text>
					<!-- <image class="right" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/right.png"></image> -->
					<text class="btn">一键导肮</text>
				</view>
				<u-parse :content="show_text" @preview="preview" @navigate="navigate" />
				<view class="qrcode">
					<image :src="qr_url" class="qrcode-image" mode="widthFix" @click="previewImg(qr_url)"></image>
				</view>
			</view>	
			<view class="bottom-btn" v-if="companyDetail.attach_function=='1'">
				<button @click="toMingMei">平台首页</button>
				<button @click="toRemind">商务留言</button>
				<button open-type="share">一键分享</button>
			</view>	
		</view>
			
	
		<!-- <view class="share">
			<button open-type="share">
				<image class="share-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/share.png" mode="aspectFit"  ></image>
			</button>
		</view> -->
		<!-- <view class="modal" v-if="modalShow" @click.stop="hideModal">
			<view class="image" @click.stop>
				<image :src="companyDetail.wechat_img_url" mode="widthFix"></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		components: {
		    uParse
		  },
		data() {
			return {
				personId:'',
				topVideoUrl:'',
				topImgUrl:'',
				qr_url:'',
				article: '',
				title: '',
				setTimeId: '',
				user_id: '',
				companyDetail:'',
				modalShow: false,
				show_text: '',
				banner:'',
				office: '',
				type: '',
				showVideo: true
			}
		},
		onLoad(options) {
			console.log(options)
			if(options.scene){
				let scene = decodeURIComponent(options.scene);
				let str = scene.split(',');
				this.personId = str[0];
				uni.setStorageSync('olduser_id',str[1])
			}else{
				this.personId=options.personId;
			}
			this.getCharacterDetail();
			this.bannerList();
			// if(options.user_id){
			// 	uni.setStorageSync('olduser_id',options.user_id)
			// 	// this.user_id = options.user_id;
			// 	// let _this = this;
			// 	// this.setTimeId = setTimeout(this.wxShare,30000)
			// }
		},
		onShow(){
			this.showVideo = true;
		},
		onUnload(){
			console.log('ss')
			clearTimeout(this.setTimeId);
		},
		onHide(){
			console.log('aa')
			clearTimeout(this.setTimeId);
			this.showVideo = false;
		},
		onShareAppMessage(){
		   return {
		    title: this.title,
		    path: '/pages/personDetail/index?personId='+this.personId+'&&user_id='+uni.getStorageSync('user_id')
		  }
		},
		methods: {
			async bannerList(){
				const res = await this.$api.getCarousel({user_token:uni.getStorageSync('userToken')});
				if(res.data.level == 'success'){
					this.banner = res.data.data[0].link_url;
					let str = this.banner.split('?');
					str = str[1].split('=');
					this.type = str[0];
					this.office = str[1];
				}
			},
			toMingMei(){
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			toRemind(){
				uni.navigateTo({
					url: '/pages/remindEidtor/index?personId='+this.personId
				})
			},
			calling(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			//地址
			            skipMap(){
			                let str = (this.companyDetail.province==null?'':(this.companyDetail.province[this.companyDetail.province.length-1]=='市'?this.companyDetail.province:(this.companyDetail.province+(this.companyDetail.city==null?'':this.companyDetail.city))))+(this.companyDetail.area==null?'':this.companyDetail.area)+(this.companyDetail.address_detail==null?'':this.companyDetail.address_detail)
			                this.$map.geocoding({
			                    address: str,
			                    fail: function (data) {
			                        uni.showToast({
			                            icon: 'none',
			                            title: '地址解析失败！'
			                        })
			                    },
			                    success: function (res) {
			                        let latitude = res.result.location.lat;
			                        let longitude = res.result.location.lng;
			                        uni.openLocation({
			                            latitude,
			                            longitude,
			                            name: str,
			                            scale: 18
			                        })
			                    }
			                });
			            },
			showModal(url){
				let str = url ;
				let list = [url];
				uni.previewImage({
					current: url,
					urls: list
				})
			},
			//记录分销
			async wxShare(){
				let params = {
					user_id: this.user_id,
					character_id: this.personId,
					user_token: uni.getStorageSync('userToken')
				}
				const res = await this.$api.wxShare(params);
				if(res.data.level == 'success'){
					return;
				}
			},
			preview(src, e) {
				console.log('ddd')
			      // do something
			    },
			navigate(href, e) {
			  // do something
			},
			previewImg(url){
				uni.previewImage({
					current:url,
					urls:[url]
				})
			},
			async getCharacterDetail(){
				//获取品牌详情
				let parmas={character_id:this.personId};
				let res=await this.$api.getCharacterDetail(parmas);
				if(res.data.level=='success'){
					let data=res.data.data
					this.companyDetail = res.data.data;
					setTimeout(()=>{
						this.article=data.content;
					},100)
					// this.topVideoUrl='http://file.rzkeji.com//web/shanghui/uploads/2019/10/9/49f3bf306fc60151686a12b9923d4664.mp4'
					if(data.video_url){
						this.topVideoUrl=data.video_url;
					}else{
						this.topImgUrl=data.img_url;
					}
					this.qr_url=data.qr_url;
					this.title = data.name;
					this.show_text = data.show_text;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import'~@/common/scss/common.scss';
	.content{
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
	}
	.topContent{
		width: 100%;
		position: fixed;
		z-index: 100;
		top:0;
		video{
			width: calc(100% - 40rpx);
			height: 500rpx;
		}
		image{
			width: calc(100% - 40rpx);
			height: 500rpx;
			border-radius: 10rpx;
		}
	}
	.contente-parse{
		margin-top:540rpx;
		height: calc(100vh - 600rpx);;
	}
	.qrcode{
		margin-top:40rpx;
		// margin-bottom: 60rpx;
		display: flex;
		justify-content: center;
		.qrcode-image{
			width: 320rpx;
			height: 320rpx;
		}
	}
	.bottom-btn{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		button{
			width: 30vw;
			margin: 0 1.25vw;
			font-size: 28rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			text-align: center;
			border: 1rpx solid #DBDBDB;
		}
	}
	.aboutMe{
		position: relative;
		top: 500rpx;
		left: 0;
	}
	.phone{
		position: relative;
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.cont{
			width: 65%;
			height: 40rpx;
			overflow: hidden;
		}
		.btn{
			position: absolute;
			right: 0;
			top: 20rpx;
			width: auto;
			border: 1rpx solid #DBDBDB;
			border-radius: 8rpx;
			padding: 10rpx 30rpx;
			font-size: 20rpx;
			background: #FFFFFF;
		}
	}
	text{
		padding: 0 20rpx 0 20rpx;
		// width: 35%;
		font-size: 32rpx;
	}
	.code{
		width: 200rpx;
		height: 200rpx;
		vertical-align: middle;
	}
	.icons{
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}
	.share-img{
		height: 50rpx;
	}
	.right{
		margin-left: auto;
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}
	.share{
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
		z-index: 1000;
		background: none;
		width: 60rpx;
		height: 60rpx;
		button{
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0;
			margin: 0;
			background: none;
			border: none;
			image{
				width: 100%;
				height: 100%;
			}
		}
		button::after{
			border: none;
		}
	}
	.modal{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3000;
		background: rgba(255,255,255,0.5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		.image{
			width: 60vw;
			image{
				width: 100%;
			}
		}
	}
	.topImg{
		background: #fff;
	}
</style>
